طراحی وب سایت
درباره سایت
آخرین مطالب
امکانات وب
در اين فصل شما مي توانيد اولين صفحه وب خودتان را طراحی وب سایت خلق نماييد و با XHTM آشنا خواهيد شد و مرحله به مرحله كارهاي خود را در مرورگر تست ميكنيد .
بگذاريد دقيق شويم !
يادگيري اين سه لايه شما را به يك طراح تبديل ميكند!
.لايه دوم لايه نمايش است كه به عناصر HTML شكل و ظاهر مي دهد و لايه سوم لايه رفتار است كه حركت و پويايي صفحات را شامل مي شود.
چيزي كه در اين كتاب آموزش داده مي شود مربوط به 2 لايه HTML و CSS است.
ديدن Source برنامه:
روش كار بدين صورت است كه ماوس را درروي صفحه جايي غير از تصاوير ببريد و كليك راست كنيد و view page source يا view source را بزنيد.
بايد صفحه اي مانند زير در فايرفاكس ببينيد:
عناصر اصلي يك صفحهHTML :
يک DocType
يک<title> tag
يک<body> tag
تو سورس پيداشون كنيد.
براي ديدن تصوير واضحتر روي تصوير بالا کليک کنيد
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type content="text/html; charset=utf-8"/>
</head>
<body>
</body>
</html>
حالا مي خواهيم با تك تك اين عناصر آشنا شويم :
داك تايپ DocType : Document Type Definition
همانطوري كه فايل word 2007 در نمايش در 2000 دچار مشكل مي شود HTML ها با داك تايپ هاي
در واقع اين داك تايپ است كه به مرورگر مي گويد اين سند از چه نوعي است و بايد به چه ترتيب Render شود . نحوه رندر شدن و تفاوت هاي آنها بايد در سطح حرفه اي تري مطرح شود.
داك تايپ ها هم در طول زمان به وجود مي آيند يعني مانند word نوع هاي جديدي روي قبلي ها عرضه مي شوند مانند HTML5 كه به تازگي مطرح شده است.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
به کدهاي داك تايپ دقت نماييد: ما در اين خط مي گوييم نوع سند چيست و آدرسي كه بايد به اين نوع سند در وب سايت كنسرسيوم جهاني وب World Wide Web Consortium يا W3C ، اشاره كند کدام است.
در حال حاضر دو نوع داكتايپ هستند كه استفاده بيشتري دارند Transitional و Strict
همانطوري كه گفتم فعلا دنبال تفاوت اين داك تايپ ها نباشيد به آن هم خواهيم رسيد .
تاكيد ميكنم : اولين آيتم صفحه است بدون فاصله. اين يك قانون است.
عناصر HTML :
قبل از اين كه عناصر HTML را شرح دهم بايد با مفهوم تگ (tag) آشناشويد. تگ يعني اسمي كه ميان اين دو <> قرار گيرد و نام تگ همان متني است كه بين اين دو <> قرار مي گيرد
تگ ها مي توانند شامل چند attribute (ويژگي) باشند:
<html xmlns="http://www.w3.org/1999/xhtml " dir="rtl" >
dir يك نام attribute است و rtl ، value (مقدار) آن است كه بين " " قرار گرفته است.
به مثال بالا دقت نماييد HTML باز شده و بسته شده است. تگهاي empty
<img src="images/test.jpg" alt="test" />
<br/>
در استفاده از تگ ها بايد دانيد كه از چه نوعي هستند تا سند شما دچار error نشود بعنوان مثال اگر تگ div را به صورت empty بنويسيم دچار error مي شويم.
نگران نباشيد كم كم همه آنها را خواهيد آموخت . بياييد همين الان تو اينترنت عبارت روبرو را جستجو كنيم :
empty tag in html
بسيار عالي شما هم اين نتايج را پيدا كرديد :
• <br/>
• <hr/>
• <meta/>
• <base/>
• <link/>
• <meta/>
• <img/>
• <embed/>
• <area/>
• <input/>
•
اين را گفتم كه هيچ وقت دنياي وب و جستجو را فراموش نكنيد.
غير از داك تايپ ها تمامي عناصر صفحه داخل تگ HTML است كه شامل 2 بخش مي شود head و body
اين يك تگ container است و در بالاي سند قبل از body قرار مي گيرد و شامل اطلاعاتي در باره صفحه است مانند title, meta, css و .....
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
عنصر title :
يك تگ container است كه متن وسط آن در عنوان (Title) بالاي صفحه قرار ميگيرد :
موارد استفاده ديگر:
• اين تايتل در زمان مينيمايز كردن پنجره در taskbar windows قابل مشاهده است
• براي موتورهاي جستجو هم حائز اهميت مي باشد چيزي که در بهينه سازي وب سايت وب اسکالا هم استفاده شده است
عنصر meta :
به طور مثال براي نام نويسنده ويا حق كپي رايت و يا نوع كاراكتر و ....
Css و javascript هم در head قرار ميگيرند كه طراحی وب سایت بنا به نياز استفاده ميشوند البته براي جاوااسكريپت ميتوان يك تفاوتهايي در طراحي هاي حرفه اي قائل شد. به طور مثال سورسي که در طراحي سايت فوق استفاده شده است را مشاهده نماييد. جاوا اسکريپت در پايين صفحه درج شده است.
عناصر body :
تيترها، پاراگراف ها, تصاوير و .......
در قسمت بعدي به طور عملي با هم يك وب سايت مي سازيم!
برچسب: طراحی وب سایت, طراحی سایت, طراحی وب, نویسنده: ailin تاريخ: پنجشنبه 24 مرداد 1392 ساعت: 20:51
اين کلمه مخفف Active server page يا صفحات فعال تحت سرور است که نسخه اوليه اين زبان تحت فريم ورک دات نت در سال 2002 توسط کمپاني مايکروسافت براي توليد صفحات وبسایت پويا معرفي شد و در حال حاضر به يکي از پرقدرت ترين زبان ها براي توليد اپليکيشن هاي وب مبدل شده است آخرين نگارش ASP.NET نسخه چهارم اين زبان است که در آن توجه زيادي برروي معماري سه لايه يا MVC داشته است.
PHP
واژه PHP بر گرفته از Hypertext Preprocessor مي باشد که يک زبان منبع باز و قابل توسعه مي باشد و در سال 1994 بوسيله راموس لردوف (Rasmus Lerdorf) کانادايي به وجود آمد. برنامه هاي نوشته شده با اين زبان اسکريپتي تحت لينوکس اجرا مي شود. ناگفته نماند که برنامه هاي نوشته شده با اين زبان قابليت اجرا تحت ويندوز را هم دارا هستند. نام بانک اطلاعاتي اين زبان Mysql است و آخرين نگارش اين زبان نسخه پنجم آن است که نسبت به نسخه هاي پيشين خود توجه بيشتري روي معماري سه لايه داشته است.
Ruby
طراحي و توسعه زبان رابي به اواسط دهه 1990 بازمي گردد. منتشر کننده اين زبان فردي به نام يوکيهيرو ماتز ماتسوموتو (Yukihiro Matz Matsumoto) بود. نسخه هاي متعددي از اين زبان طي سال هاي متوالي توسعه يافت و نسخه پايدار آن در سال 2006 منتشر شد. از محبوب ترين فريم ورک هايي که در چندسال اخير برپايه اين زبان توسعه يافته مي توان Ruby on rails را نام
برچسب: طراحی وب سایت, طراحی سایت, طراحی وب, نویسنده: ailin تاريخ: پنجشنبه 24 مرداد 1392 ساعت: 20:52